<template id="type">
  <section class="type-section">
    <div class="type-header-wrap">
      <header class="type-header">
        <div class="type-header-search">
          <form action>
            <i class="type-searchfdj"></i>
            <input type="search" placeholder="运动鞋" />
          </form>
        </div>
      </header>
    </div>
    <main class="type-main">
      <div class="type-main-left">
        <div class="ul">
          <mt-navbar v-model="selected">
            <mt-tab-item id="1">京喜推荐</mt-tab-item>
            <mt-tab-item id="box2">医药健康</mt-tab-item>
            <mt-tab-item id="3">时尚女装</mt-tab-item>
            <mt-tab-item id="4">潮流男装</mt-tab-item>
            <mt-tab-item id="5">食品酒水</mt-tab-item>
            <mt-tab-item id="6">居家生活</mt-tab-item>
            <mt-tab-item id="7">厨房配件</mt-tab-item>
            <mt-tab-item id="8">手机数码</mt-tab-item>
            <mt-tab-item id="9">家用电器</mt-tab-item>
            <mt-tab-item id="10">美妆个护</mt-tab-item>
            <mt-tab-item id="11">鞋靴箱包</mt-tab-item>
            <mt-tab-item id="12">生鲜果蔬</mt-tab-item>
            <mt-tab-item id="13">母婴童装</mt-tab-item>
            <mt-tab-item id="14">汽车用品</mt-tab-item>
            <mt-tab-item id="15">电脑办公</mt-tab-item>
          </mt-navbar>
        </div>
      </div>
      <div class="type-main-right">
        <!-- tab-container -->
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>京喜热销</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="box2">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>医药健康</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="3">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>时尚女装</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="4">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>潮流男装</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="5">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>酒水食品</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="6">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>居家生活</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="7">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>厨房配件</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="8">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>手机数码</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="9">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>家用电器</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="10">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>美妆个护</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="11">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>鞋靴箱包</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="12">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>生鲜果蔬</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="13">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>母婴童装</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="14">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>汽车用品</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="15">
            <div class="jxtj-wrap">
              <div class="jxtj-img00">
                <img src="../../../data/assets/images/jxtj-00.png" alt />
              </div>
              <div class="jxrx">
                <h4>办公用品</h4>
                <ul>
                  <li v-for="(v,i) in list01">
                    <router-link to="/type">
                      <img :src="v.src" />
                      <p>{{v.con}}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </main>
  </section>
</template>
<script>
export default {
  data() {
    return {
      selected: "1",
      list01: []
    };
  },
  mounted() {
    this.$http;
    this.$http
      .get("./data/jxtj.json")
      .catch(function(error) {
        console.log(error);
      })
      .then(res => {
        this.list01 = res.data.list01;
      });
  }
};
</script>
<style>
.type-main .mint-navbar {
  display: block;
}
.type-main .type-main-left .mint-tab-item-label {
  text-decoration: none;
  color: #666;
  font-size: 12px;
  line-height: 50px;
}
.type-main .mint-navbar a {
  background: #f8f8f8;
}
.type-main .mint-navbar .mint-tab-item.is-selected {
  border-bottom: none;

  background: #fff;
}
.type-main .mint-navbar .mint-tab-item.is-selected .mint-tab-item-label {
  color: red;
  font-size: 14px;
}
.type-main .mint-tab-item {
  padding: 0px;
  height: 50px;
}
</style>
<style scoped>
* {
  list-style: none;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.type-header-wrap {
  border-bottom: 5px solid #f2f2f7;
}
.type-header {
  margin: 0 10px;
}
.type-header-search {
  width: 100%;
}
.type-header-search form {
  position: relative;
}
.type-header-search input {
  width: 100%;
  border: none;
  line-height: 29px;
  margin: 5px 0px;
  border-radius: 30px;
  padding-left: 25px;
  padding-right: 10px;
  font-size: 14px;
  outline: none;
  color: #333;
  background-color: #f2f2f7;
}
.type-searchfdj {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 11px;
  left: 5px;
  background: url(../../assets/images/d0026a136beefeb9.png);
  background-size: 100% auto;
}
.type-main {
  display: flex;
}
.type-main-left {
  width: 84px;
  height: calc(100vh - 43.8px - 40.8px);
  overflow-y: auto;
}
.type-main-left .ul {
  height: 744px;
  overflow: hidden;
}
.type-main-left a {
  text-align: center;
  background: #f8f8f8;
}

.type-main-right {
  width: calc(100% - 84px);
  height: calc(100vh - 43.8px - 40.8px);
  overflow-y: auto;
}

.jxtj-wrap {
  padding: 0 15px 15px 15px;
}
.jxrx h4 {
  color: #666;
  font-size: 14px;
  margin: 15px 0 5px;
}
.jxrx ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.jxrx li {
  width: 33.3%;
  padding: 10px;
  text-align: center;
}
.jxtj-wrap img {
  width: 100%;
}
.jxtj-img00 {
  margin-top: 10px;
}
.jxtj-wrap a {
  color: #666;
  font-size: 12px;
  text-decoration: none;
}
</style>
 
 